import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { throttle } from "lodash";

const app = createApp(App);

app.directive("lazy-load", {
  mounted: (el, binding) => {
    const handleScroll = (dom, loadData) => {
      const scrollBottom = dom.scrollTop + dom.clientHeight;
      if (dom.scrollHeight - scrollBottom <= 20) {
        loadData();
      }
    };
    let scrollContainer = el?.querySelector(".el-scrollbar__wrap") ?? el;
    // 滚动事件监听
    const scroll = throttle(
      handleScroll.bind(null, scrollContainer, binding.value),
      400
    );
    scrollContainer.addEventListener("scroll", scroll);
    // scrollContainer.removeEventListener("scroll", scroll)
  },
});

app.use(ElementPlus, { locale: zhCn });
app.mount("#app");
